<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虎牙直播间数据分析平台</title>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <style>
        em{
            color: red;
        }
    </style>
</head>
<body>
    <div id = "app" style="width: 80%;margin: 0 auto">
        <!-- warning-->
        <div>虎牙直播间数据分析平台, 仅为学习研究所用</div>
        <!-- 搜索框-->
        <div>

            <input type="text" class="form-control" v-model="keyword" placeholder="输入关键字" style="width: 50%;float: left">
            <button class="btn btn-primary" style="float: left" @click = "searchDataList">搜索</button>
            <button class="btn btn-success" style="float: left;margin-left: 20px" @click = "refreshDataList">更新</button>
            <span style="float: left;color: red">{{msg}}</span>

        </div>
        <!-- 表格-->
        <div>
            <my-table v-bind:Datas = "LivingDatas"></my-table>
        </div>
    </div>
</body>
</html>
<script>
    Vue.component("my-table",{
        props:{
            Datas: []
        },
        template: '<table class="table table-striped">\n' +
            '                <thead>\n' +
            '                <tr>\n' +
            '                    <th>直播间封面</th>\n' +
            '                    <th>直播间热度</th>\n' +
            '                    <th>直播间id</th>\n' +
            '                    <th>直播间地址</th>\n' +
            '                    <th>直播间通道</th>\n' +
            '                    <th>主播用户名</th>\n' +
            '                    <th>直播间标签</th>\n' +
            '                    <th>主播id</th>\n' +
            '                    <th>isBluRay(未知字段)</th>\n' +
            '                    <th>screenType(未知字段)</th>\n' +
            '                    <th>直播间介绍</th>\n' +
            '                    <th>游戏全名</th>\n' +
            '                    <th>蓝光比率</th>\n' +
            '                    <th>bussType(未知字段)</th>\n' +
            '                    <th>房间名称</th>\n' +
            '                    <th>房间号</th>\n' +
            '                    <th>isRoomPay(未知字段)</th>\n' +
            '                    <th>直播间别称</th>\n' +
            '                    <th>直播通道</th>\n' +
            '                    <th>推荐状态</th>\n' +
            '                    <th>推荐标签姓名</th>\n' +
            '                    <th>实时源类型</th>\n' +
            '                    <th>是否是一起看。0为是 1为否</th>\n' +
            '                </tr>\n' +
            '                </thead>\n' +
            '                <tbody>\n' +
            '                <tr v-for = "data in Datas">\n' +
            '                    <td><img :src="data.avatar180" class="img-rounded"></td>\n' +
            '                    <td>{{ data.totalCount }}</td>\n' +
            '                    <td>{{ data.gid }}</td>\n' +
            '                    <td>\n' +
            '                        <a :href = "data.profileRoom | appendUrl">{{ data.profileRoom | appendUrl}}</a>\n' +
            '                    </td>\n' +
            '                    <td>{{ data.channel }}</td>\n' +
            '                    <td v-html="data.nick"></td>\n' +
            '                    <td>{{ data.roomPayTag }}</td>\n' +
            '                    <td>{{ data.uid }}</td>\n' +
            '                    <td>{{ data.isBluRay }}</td>\n' +
            '                    <td>{{ data.screenType }}</td>\n' +
            '                    <td v-html="data.introduction"></td>\n' +
            '                    <td v-html="data.gameFullName"></td>\n' +
            '                    <td>{{ data.bluRayMBitRate }}</td>\n' +
            '                    <td>{{ data.bussType }}</td>\n' +
            '                    <td v-html="data.roomName"></td>\n' +
            '                    <td>{{ data.profileRoom }}</td>\n' +
            '                    <td>{{ data.isRoomPay }}</td>\n' +
            '                    <td>{{ data.privateHost }}</td>\n' +
            '                    <td>{{ data.liveChannel }}</td>\n' +
            '                    <td>{{ data.recommendStatus }}</td>\n' +
            '                    <td>{{ data.recommendTagName }}</td>\n' +
            '                    <td>{{ data.liveSourceType }}</td>\n' +
            '                    <td>{{ data.isWatchTogetherVip }}</td>\n' +
            '                </tr>\n' +
            '                </tbody>\n' +
            '            </table>\n'
    })
    Vue.filter("appendUrl", value => {
        console.log("过滤器appendUrl传入的值:"+value)
        return "https://www.huya.com/"+value
    })
    const vue = new Vue({
        el: '#app',
        data: {
            keyword: '',
            LivingDatas: [],
            msg: '',
            baseUrl: "https://www.huya.com/"
        },
        watch:{
            keyword(newV, oldV){
                console.log("当前的监听属性为:"+newV)
                if(newV === ""){
                    this.msg  = "关键字不能为空"
                    return
                }
                axios({
                    method: 'get',
                    url: '/searchDataList',
                    params: {
                        keyword: newVm
                    }
                }).then(res=>{
                    this.LivingDatas = res.data.data
                })
            }
        },
        mounted() {
            this.getDataList()
        },
        methods: {
            getDataList() {
                axios({
                    method: "GET",
                    url: '/getDataList/0'
                }).then(res => {
                    console.log(res)
                    if (res.data.code === 0) {
                        this.LivingDatas = res.data.data
                        console.log("数据调用成功")
                    } else {
                        this.LivingDatas = []
                    }
                })
            },
            searchDataList(){
                if(this.keyword === ""){
                    this.msg  = "关键字不能为空"
                    return
                }
                axios({
                    method: 'get',
                    url: '/searchDataList',
                    params: {
                        keyword: this.keyword
                    }
                }).then(res=>{
                    this.LivingDatas = res.data.data
                })
            },
            refreshDataList(){
                axios({
                    method: 'post',
                    url: '/refreshDataList'
                }).then(res =>{
                    console.log(res)
                })
            }
        }
    })
</script>
